<template>
  <div class="goods">
  <div class="menu-wrapper" ref="menuWrapper">
    <ul>
      <li v-for="(item, index) in goods" class="menu-item" :key="index" :class="{'current': currentIndex === index}" @click="selcetMenu(index,$event)">
        <span class="text">
          <span v-show="item.type > 0" class="icon" :class="classMap[item.type]"></span>
          {{item.name}}
        </span>
      </li>
    </ul>
  </div>
  <div class="foods-wrapper" ref="foodWrapper" >
    <ul>
      <li v-for="item in goods" class="food-list food-list-hook">
        <h1 class="title">{{ item.name }}</h1>
        <ul>
          <li v-for="food in item.foods" class="food-item">
            <div class="icon">
              <img width="57" height="57" :src="food.icon">
            </div>
            <div class="content">
              <h2 class="name">{{ food.name}}</h2>
              <p class="desc"> {{food.description}}</p>
              <div class="extra">
                <span class="count">月售{{food.sellCount}}份</span>
                <span>好评率{{food.rating}}%</span>
              </div>
              <div class="price">
                <span class="now">{{food.price}}元</span>
                <span v-show="food.oldPrice" class="old">{{food.oldPrice}}元</span>
              </div>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </div>
    <shopcart :delivery-price="seller.deliveryPrice" :min-price="seller.minPrice"></shopcart>
  </div>

</template>
<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl";
  .goods{
    display: flex;
    overflow: hidden;
    position: absolute;
    top:174px;
    bottom: 46px;
    width: 100%;
  }
  .goods .menu-wrapper{
    padding: 0 12px;
    flex: 0 0 80px;
    width: 80px;
    background:  #f3f5f7;

  }
  .goods .menu-wrapper .menu-item{
    display: table;
    height: 54px;
    width: 56px;
    line-height: 14px;

  }
  .goods .menu-wrapper .current{
    background: white;
    position: relative;
    z-index: 10;
    margin-top: -1px;
    font-weight: 700;

  }
  .goods .menu-wrapper .text{
    display: table-cell;
    width: 56px;
    vertical-align: middle;
    font-size: 12px;
  }
  .goods .menu-wrapper .icon{
    display: inline-block;
    vertical-align: top;
    width: 12px;
    height: 12px;
    margin-right: 2px;
    background-size: 12px 12px;
    background-repeat: no-repeat;

  }
  .goods .menu-wrapper .decrease{
  bg-img('decrease_3')
  }
  .goods .menu-wrapper .discount{
  bg-img('discount_3')
  }
  .goods .menu-wrapper .special{
  bg-img('special_3')
  }
  .goods .menu-wrapper .invoice{
  bg-img('invoice_3')
  }
  .goods .menu-wrapper .guarantee{
  bg-img('guarantee_3')
  }
   .goods .foods-wrapper{
 flex: 1;
  }
  .goods .foods-wrapper .title{
    padding-left: 14px;
    height: 26px;
    line-height: 26px;
    border-left: 2px solid #d9dde1;
    font-size: 12px;
    color: rgb(147, 153, 159);
    background: #f3f5f7;

  }
  .goods .foods-wrapper .food-item{
    display: flex;
    margin: 18px;
    padding-bottom: 18px ;
  }
  .goods .foods-wrapper .last-child{
    margin-bottom: 0;
  }
  .goods .foods-wrapper .icon{
    flex:0 0 57px;
    margin-right: 10px;

  }
  .goods .foods-wrapper .content{
    flex:1;

  }
  .goods .foods-wrapper .content .name{
    margin: 2px 0 8px 0;
    height: 14px;
    line-height: 14px;
    font-size: 14px;
    color: rgb(7 ,17 , 27)

  }
  .goods .foods-wrapper .content .desc{
    margin-bottom: 8px;
    line-height: 12px;
    font-size: 10px;
    color: rgb(147, 153, 159);
  }
  .goods .foods-wrapper .content .extra{
    line-height: 12px;
    color: rgb(147, 153, 159);
    font-size: 12px;
  }
  .goods .foods-wrapper .content .extra .count{
    /*font-size: 12px;*/
  }
  .goods .foods-wrapper .content .price{
    font-weight: 700;
    line-height: 24px;

  }
  .goods .foods-wrapper .content .price .now{
    margin-right: 8px;
    font-size: 14px;
    color: red;
  }
  .goods .foods-wrapper .content .price .old{
    text-decoration: line-through;
    font-size: 10px;
    color: #7e8c8d;
  }
</style>

<script type="text/ecmascript-6">
  import BScroll from 'better-scroll'
  import shopcart from '../shopcart/shopcart'
  const ERR_OK = 0
  export default {
    props: {
      seller: {
        type: Object
      }
    },
    data () {
      return {
        goods: [],
        listHeight: [],
        scrollY: 0
      }
    },
    computed: {
      currentIndex() {
        for (let i = 0; i < this.listHeight.length; i++) {
          let height1 = this.listHeight[i]
          let height2 = this.listHeight[i + 1]
          if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
            return i
          }
        }
        return 0
      }
    },
    created () {
      this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
      this.$http.get('/api/goods').then(response => {
        response = response.body
        if (response.errno === ERR_OK) {
          this.goods = response.data
          this.$nextTick(() => {
            this._initScroll()
            this._calculateHeight()
          })
        }
      })
    },
    methods: {
      selcetMenu(index, event) {
        if (!event._constructed) {
          return
        }
        let foodList = this.$refs.foodWrapper.getElementsByClassName('food-list-hook')
        let el = foodList[index]
        this.foodsScroll.scrollToElement(el, 300)
      },
      _initScroll() {
        this.menuScroll = new BScroll(this.$refs.menuWrapper, {
          click: true
        })
        this.foodsScroll = new BScroll(this.$refs.foodWrapper, {
          probeType: 3
        })
        this.foodsScroll.on('scroll', (pos) => {
          this.scrollY = Math.abs(Math.round(Math.round(pos.y)))
        })
      },
      _calculateHeight() {
        let foodList = this.$refs.foodWrapper.getElementsByClassName('food-list-hook')
        let height = 0
        this.listHeight.push(height)
        console.log(foodList)
        for (let i = 0; i < foodList.length; i++) {
          let item = foodList[i]
          console.log(foodList[i])
          height = height + item.clientHeight
          this.listHeight.push(height)
        }
      }
    },
    components: {
      shopcart
    }
  }
</script>
